<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="./index.css" rel="stylesheet" type="text/css">
  <script type="text/javascript">
  window.onload = function(){
    var menu = document.querySelector('.menu');
    menu.onclick = function(e){
      if(e.target.hasChildNodes() && e.target.firstChild.tagName === 'I'){
        menu.querySelector('.active').classList.remove('active')
        e.target.className = 'active';
        for(var l = menu.childElementCount, i = 0; i < l; i++){
          if(e.target.isEqualNode(menu.children[i])){
            document.querySelector('.panel div.active').classList.remove('active')
            document.querySelector('.panel').children[i].classList.add('active')
            return false;
          }
        }
      }
    }
  }
  </script>
</head>
<body>
  <div class="head">
    <img class="logo" src="" />
    <span class="head_right">
      <img class="user_logo" src="" />
      &nbsp;&nbsp;<span>150****5856</span>&nbsp;
      <svg t="1595051511609" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2788" width="512" height="512"><path d="M512 736c-7.776 0-15.552-2.816-21.76-8.48l-416-384a32 32 0 0 1 43.488-47.04l394.24 363.968L906.304 296.48a32 32 0 0 1 43.456 47.04l-416 384a32.032 32.032 0 0 1-21.76 8.48" p-id="2789"></path></svg>
    </span>
  </div>
  <div class="content">
    <div class="menu">
      <div class="active"><i></i>用户信息</div><div><i></i>修改密码</div><div><i></i>应用路径</div>
      <div><i></i>客户端信息</div><div><i></i>基本设置</div>
    </div>
    <div class="panel">
      <div class="user active">
        <div>用户：<span>李某某</span></div>
        <div>手机：<span>189****5678</span></div>
        <div>邮箱：<span>暂未绑定</span></div>
        <div>部门：<span>暂未绑定</span></div>
        <div>职位：<span>暂未绑定</span></div>
      </div>
      <div class="pwd">
        <div><span>原密码：</span><span>
            <svg t="1594993310392" class="icon" viewBox="0 0 1034 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7763" width="512" height="512"><path d="M823.7 318.1v-6.5c0-68.5-22.6-132.2-67.1-189.2C695.8 44.6 606.6 0 512 0S328.2 44.6 267.5 122.4c-44.5 57-67.1 120.7-67.1 189.2v6.5C123.7 338 66.8 407 66.8 489.9v356c0 98.4 79.7 178.1 178.1 178.1h534.3c98.4 0 178.1-79.7 178.1-178.1v-356c-0.1-82.9-57-151.9-133.6-171.8z m-534.3-6.4c0-48.2 16.2-93.4 48.3-134.4C381.4 121.2 445 89 512 89s130.6 32.1 174.3 88.2c32 41 48.3 86.2 48.3 134.4v0.2H289.4v-0.1z m586.5 534.2c0 53.4-43.4 96.8-96.8 96.8H244.9c-53.4 0-96.8-43.4-96.8-96.8v-356c0-53.4 43.4-96.8 96.8-96.8h534.3c53.4 0 96.8 43.4 96.8 96.8v356z" p-id="7764"></path><path d="M512 537.4c-39.6 0-71.8 32-71.8 71.3 0 22.5 10.8 42.4 27.3 55.5v134.3c0 24.6 19.9 44.5 44.5 44.5s44.5-19.9 44.5-44.5V664.1c16.5-13.1 27.3-32.9 27.3-55.5 0-39.2-32.2-71.2-71.8-71.2z" p-id="7765"></path></svg>
        <input type="password" placeholder="请输入原密码" /></span></div>
        <div><span>新密码：</span><span>
          <svg t="1594993310392" class="icon" viewBox="0 0 1034 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7763" width="512" height="512"><path d="M823.7 318.1v-6.5c0-68.5-22.6-132.2-67.1-189.2C695.8 44.6 606.6 0 512 0S328.2 44.6 267.5 122.4c-44.5 57-67.1 120.7-67.1 189.2v6.5C123.7 338 66.8 407 66.8 489.9v356c0 98.4 79.7 178.1 178.1 178.1h534.3c98.4 0 178.1-79.7 178.1-178.1v-356c-0.1-82.9-57-151.9-133.6-171.8z m-534.3-6.4c0-48.2 16.2-93.4 48.3-134.4C381.4 121.2 445 89 512 89s130.6 32.1 174.3 88.2c32 41 48.3 86.2 48.3 134.4v0.2H289.4v-0.1z m586.5 534.2c0 53.4-43.4 96.8-96.8 96.8H244.9c-53.4 0-96.8-43.4-96.8-96.8v-356c0-53.4 43.4-96.8 96.8-96.8h534.3c53.4 0 96.8 43.4 96.8 96.8v356z" p-id="7764"></path><path d="M512 537.4c-39.6 0-71.8 32-71.8 71.3 0 22.5 10.8 42.4 27.3 55.5v134.3c0 24.6 19.9 44.5 44.5 44.5s44.5-19.9 44.5-44.5V664.1c16.5-13.1 27.3-32.9 27.3-55.5 0-39.2-32.2-71.2-71.8-71.2z" p-id="7765"></path></svg>
        <input type="password" placeholder="请输入8位以上大小写字母、数字以及特殊字符" /></span></div>
        <div><span>确认密码：</span><span>
          <svg t="1594993310392" class="icon" viewBox="0 0 1034 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7763" width="512" height="512"><path d="M823.7 318.1v-6.5c0-68.5-22.6-132.2-67.1-189.2C695.8 44.6 606.6 0 512 0S328.2 44.6 267.5 122.4c-44.5 57-67.1 120.7-67.1 189.2v6.5C123.7 338 66.8 407 66.8 489.9v356c0 98.4 79.7 178.1 178.1 178.1h534.3c98.4 0 178.1-79.7 178.1-178.1v-356c-0.1-82.9-57-151.9-133.6-171.8z m-534.3-6.4c0-48.2 16.2-93.4 48.3-134.4C381.4 121.2 445 89 512 89s130.6 32.1 174.3 88.2c32 41 48.3 86.2 48.3 134.4v0.2H289.4v-0.1z m586.5 534.2c0 53.4-43.4 96.8-96.8 96.8H244.9c-53.4 0-96.8-43.4-96.8-96.8v-356c0-53.4 43.4-96.8 96.8-96.8h534.3c53.4 0 96.8 43.4 96.8 96.8v356z" p-id="7764"></path><path d="M512 537.4c-39.6 0-71.8 32-71.8 71.3 0 22.5 10.8 42.4 27.3 55.5v134.3c0 24.6 19.9 44.5 44.5 44.5s44.5-19.9 44.5-44.5V664.1c16.5-13.1 27.3-32.9 27.3-55.5 0-39.2-32.2-71.2-71.8-71.2z" p-id="7765"></path></svg>
        <input type="password" placeholder="请输入8位以上大小写字母、数字以及特殊字符" /></span></div>
        <div><span></span><button>确定</button></div>
      </div>
      <div class="app">
        <div>谷歌浏览器<span>C:\Users\10235\AppData\Local\Google\Chrome\test</span><i class="btn_edit"></i><i class="bg_btn btn_del"></i></div>
        <div>谷歌浏览器<span>C:\Users\10235\AppData\Local\Google\Chrome\test</span><i class="btn_edit"></i><i class="bg_btn btn_del"></i></div>
        <div>谷歌浏览器<span>C:\Users\10235\AppData\Local\Google\Chrome\test</span><i class="btn_edit"></i><i class="bg_btn btn_del"></i></div>
        <div>IE浏览器<span>C:\Users\10235\AppData\Local\Google\Chrome\test</span><i class="btn_edit"></i><i class="bg_btn btn_del"></i></div>
      </div>
      <div class="client">
        <div><span>客户端物理IP：</span><span>192.168.10.3</span></div>
        <div><span>客户端物理IP：</span><span>172.16.1.7</span></div>
        <div><span>DNS：</span><span>144.144.144.144</span></div>
        <div><span>客户端版本信息：</span><span>Datathk SDP for Windows <span class="blue">1.8.0.0</span> Copyright © 2019</span></div>
      </div>
      <div class="setting">
        <div>开机自启<div class="switch-container">
          <input id="switch" type="checkbox" class="switch" checked />
          <label for="switch""></label>
      </div></div>
        <div>上传日志<i class="bg_btn btn_upload"></i></div>
      </div>
    </div>
  </div>
</body>
</html>